<template>
    <el-container>
        <el-header>
            <MyHeader></MyHeader>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :router="true" default-active="/home/student" class="el-menu-vertical-demo"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item v-for="v in power" :index="v.path">
                        <i :class="v.icon"></i>
                        <span slot="title">{{v.title}}</span>
                    </el-menu-item>
                    <!-- <el-menu-item index="/home/teacher">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title">教师管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/admin">
                        <i class="el-icon-s-custom"></i>
                        <span slot="title">管理员管理</span>
                    </el-menu-item> -->
                </el-menu>
            </el-aside>
            <el-main>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import { Container, Header, Aside, Main, Menu, MenuItem, message } from 'element-ui'
import { RouterLink } from 'vue-router';
import MyHeader from './MyHeader.vue';

export default {
    data() {
        return {
            power: []
        }
    },
    created() {
        const power = JSON.parse(sessionStorage.getItem('power'));
        if (power) {
            console.log(power)
            this.power = power;
        } else {
            message({
                showClose: true,
                message: '暂无权限需要重新登录',
                type: 'error'
            });
            this.$router.push('/login');
        }

        
    },
    components: {
        "el-container": Container,
        "el-header": Header,
        "el-aside": Aside,
        "el-main": Main,
        "el-menu": Menu,
        "el-menu-item": MenuItem,
        MyHeader,
        RouterLink
    }
}
</script>
<style>
.el-container,
.el-aside,
.el-menu {
    height: 100%;
}
</style>